<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      box-sizing: border-box;
    }
    html, body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }
    .container {
      position: sticky;
      padding: 100px 0 0 0;
    }
    .container::after {
      content: '';
      display: block;
      height: 100vh;
    }
    .box {
      width: 100%;
      height: 200px;
      color: #fff;
      margin: 10px;
      border: 1px solid yellow;
      background-color: #000;
    }
    .box:target {
      padding-top: 100px;
    }
    .box-1 {
      background-color: #f00;
    }
    #header {
      display: flex;
      position: sticky;
      background-color: rgba(0, 0, 0, .2);
      top: 0;
      height: 100px;
      justify-content: flex-end;
      z-index: 9;
    }
    a {
      color: #fff;
      outline-style: none;
    }

    ul {
      display: flex;
      background-color: rgba(0, 0, 0, .5);
    }
    ul li {
      list-style: none;
      width: 100px;
    }
    .other {
      width: 100%;
      height: 200px;
    }

    .target-fix {
      position: relative;
      top: -44px;
      height: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
<div class="root">
  <div class="other"></div>
  <div id="header" class="header">
    box-1
    <ul>
      <li><a href="#box-1">box-1</a></li>
      <li><a href="#box-2">box-2</a></li>
      <li><a href="#box-3">box-3</a></li>
      <li><a href="#box-4">box-4</a></li>
      <li><a href="#box-5">box-5</a></li>
      <li><a href="#box-6">box-6</a></li>
      <li><a href="#box-7">box-7</a></li>
    </ul>
  </div>
  <div class="container">
    <div class="target-fix"></div>
    <div id="box-1" class="box box-1">
      box-1
    </div>
    <div id="box-2" class="box box-2">
      box-2
    </div>
    <div id="box-3" class="box box-3">box-3</div>
    <div id="box-4" class="box box-4">box-4</div>
    <div id="box-5" class="box box-5">box-5</div>
    <div id="box-6" class="box box-6">box-6</div>
    <div id="box-7" class="box box-7">box-7</div>
  </div>
</div>
</body>
</html>